import {Button, message, Popconfirm, Space, Table, Tooltip} from "antd";
import {DeleteOutlined, EditOutlined, EyeOutlined} from "@ant-design/icons";
import {useNavigate} from "react-router-dom";
import Apis from "../../configs/Apis";
import RequestUtils from "../../utils/RequestUtils";

const UserList = (props) => {

    const {pageQueryUserReq, setPageQueryUserReq, pageQueryUserResp, doPageQuerySysUsers, onEdit, onDelete} = props;

    const [messageApi, contextHolder] = message.useMessage();

    // 定义颜色常量以便统一修改
    const COLORS = {
        primary: '#165DFF',
        success: '#00B42A',
        warning: '#FF7D00',
        danger: '#F53F3F',
        info: '#86909C',
        light: '#F2F3F5',
        dark: '#1D2129',
        tableHeader: '#F7F8FA',
        tableEvenRow: '#FFFFFF',
        tableOddRow: '#F9FAFC',
        tableHover: '#F2F3F5'
    };

    // 定义样式常量以便复用
    const COMMON_STYLES = {
        textEllipsis: {
            maxWidth: '100%',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap'
        },
        tableHeader: {
            backgroundColor: COLORS.tableHeader,
            color: COLORS.dark,
            fontWeight: 600,
            fontSize: '14px',
            padding: '12px 16px',
            borderBottom: '1px solid #E5E6EB'
        },
        tableCell: {
            padding: '12px 16px',
            borderBottom: '1px solid #E5E6EB',
            transition: 'background-color 0.2s ease'
        },
        actionButton: {
            padding: '4px',
            borderRadius: '4px',
            transition: 'all 0.2s ease',
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center'
        }
    };

    const navigate = useNavigate();

    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            width: 80,
            render: (_, __, index) => (
                <span style={{
                    display: 'inline-block',
                    width: '24px',
                    height: '24px',
                    lineHeight: '24px',
                    borderRadius: '50%',
                    backgroundColor: COLORS.light,
                    color: COLORS.dark,
                    textAlign: 'center',
                    fontSize: '13px'
                }}>
                    {index + 1 + (pageQueryUserReq.pageNum - 1) * pageQueryUserReq.pageSize}
                </span>
            )
        },
        {
            title: '账号',
            dataIndex: 'userAccount',
            key: 'userAccount',
            sorter: true,
            render: (text, record) => (
                <span style={{
                    ...COMMON_STYLES.textEllipsis,
                    color: COLORS.primary,
                    fontWeight: 500,
                    cursor: 'pointer',
                    display: 'inline-block',
                    maxWidth: '120px',
                    transition: 'color 0.2s'
                }}
                      onMouseOver={e => e.currentTarget.style.color = '#4080FF'}
                      onMouseOut={e => e.currentTarget.style.color = COLORS.primary}
                      onClick={() => {
                          navigate(`/user/search/` + record.id);
                      }}
                >{text}</span>
            )
        },
        {
            title: '昵称',
            dataIndex: 'userNickname',
            key: 'userNickname',
            render: (text) => (
                <span style={{
                    ...COMMON_STYLES.textEllipsis,
                    color: COLORS.dark,
                    display: 'inline-block',
                    maxWidth: '120px'
                }}>{text || '-'}</span>
            )
        },
        {
            title: '性别',
            dataIndex: 'userGenderValue',
            key: 'userGenderValue',
            align: 'center',
            width: 80,
            render: (text) => {
                const gender = text || '未知';
                let color = COLORS.info;
                if (gender === '男') color = '#00CCCC';
                if (gender === '女') color = '#FF4D94';

                return (
                    <span style={{
                        color,
                        fontWeight: 500,
                        display: 'inline-block',
                        width: '100%'
                    }}>{gender}</span>
                );
            }
        },
        {
            title: '出生日期',
            dataIndex: 'userBirthDate',
            key: 'userBirthDate',
            render: (text) => (
                <span style={{
                    ...COMMON_STYLES.textEllipsis,
                    color: COLORS.dark,
                    display: 'inline-block',
                    maxWidth: '120px'
                }}>{text || '-'}</span>
            )
        },
        {
            title: '所在地区',
            dataIndex: 'userAddress',
            key: 'userAddress',
            render: (text) => (
                <span style={{
                    ...COMMON_STYLES.textEllipsis,
                    color: COLORS.dark,
                    display: 'inline-block',
                    maxWidth: '120px'
                }}>{text || '-'}</span>
            )
        },
        {
            title: '个人介绍',
            dataIndex: 'userIntroduction',
            key: 'userIntroduction',
            render: (text) => (
                <Tooltip title={text || '无'} placement="topLeft">
                    <div style={{
                        ...COMMON_STYLES.textEllipsis,
                        maxWidth: '150px',
                        display: 'inline-block'
                    }}>{text || '无'}</div>
                </Tooltip>
            )
        },
        {
            title: '创建时间',
            dataIndex: 'createdTime',
            key: 'createdTime',
            sorter: true,
            render: (text) => (
                <span style={{
                    ...COMMON_STYLES.textEllipsis,
                    color: COLORS.info,
                    fontSize: '13px',
                    display: 'inline-block',
                    maxWidth: '140px'
                }}>{text || '-'}</span>
            )
        },
        {
            title: '创建人',
            dataIndex: 'createdByUserNickname',
            key: 'createdByUserNickname',
            render: (text) => (
                <span style={{
                    ...COMMON_STYLES.textEllipsis,
                    color: COLORS.dark,
                    display: 'inline-block',
                    maxWidth: '120px'
                }}>{text || '-'}</span>
            )
        },
        {
            title: '最后修改时间',
            dataIndex: 'lastModifiedTime',
            key: 'lastModifiedTime',
            sorter: true,
            render: (text) => (
                <span style={{
                    ...COMMON_STYLES.textEllipsis,
                    color: COLORS.info,
                    fontSize: '13px',
                    display: 'inline-block',
                    maxWidth: '140px'
                }}>{text || '-'}</span>
            )
        },
        {
            title: '最后修改人',
            dataIndex: 'lastModifiedByUserNickname',
            key: 'lastModifiedByUserNickname',
            render: (text) => (
                <span style={{
                    ...COMMON_STYLES.textEllipsis,
                    color: COLORS.dark,
                    display: 'inline-block',
                    maxWidth: '120px'
                }}>{text || '-'}</span>
            )
        },
        {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 180,
            render: (_, record) => (
                <Space size="small">
                    <Tooltip title="查看详情">
                        <Button
                            type="text"
                            icon={<EyeOutlined/>}
                            style={{
                                ...COMMON_STYLES.actionButton,
                                color: COLORS.primary,
                                backgroundColor: 'rgba(22, 93, 255, 0.08)'
                            }}
                            onMouseOver={e => e.currentTarget.style.backgroundColor = 'rgba(22, 93, 255, 0.15)'}
                            onMouseOut={e => e.currentTarget.style.backgroundColor = 'rgba(22, 93, 255, 0.08)'}
                            onClick={() => {
                                navigate(`/user/search/` + record.id);
                            }}
                        />
                    </Tooltip>
                    <Tooltip title="编辑用户">
                        <Button
                            type="text"
                            icon={<EditOutlined/>}
                            style={{
                                ...COMMON_STYLES.actionButton,
                                color: COLORS.warning,
                                backgroundColor: 'rgba(255, 125, 0, 0.08)'
                            }}
                            onMouseOver={e => e.currentTarget.style.backgroundColor = 'rgba(255, 125, 0, 0.15)'}
                            onMouseOut={e => e.currentTarget.style.backgroundColor = 'rgba(255, 125, 0, 0.08)'}
                            onClick={() => {
                                navigate(`/user/edit/` + record.id);
                            }}
                        />
                    </Tooltip>
                    <Tooltip title="删除用户">
                        <Popconfirm
                            title="删除用户确认"
                            description="请确认是否要删除该用户？"
                            onConfirm={() => doDeleteUser(record.id)}
                            okText="确认删除"
                            cancelText="取消"
                            placement="leftBottom"
                        >
                            <Button
                                type="text"
                                icon={<DeleteOutlined/>}
                                style={{
                                    ...COMMON_STYLES.actionButton,
                                    color: COLORS.danger,
                                    backgroundColor: 'rgba(245, 63, 63, 0.08)'
                                }}
                                onMouseOver={e => e.currentTarget.style.backgroundColor = 'rgba(245, 63, 63, 0.15)'}
                                onMouseOut={e => e.currentTarget.style.backgroundColor = 'rgba(245, 63, 63, 0.08)'}
                                onClick={() => {
                                }}
                            />
                        </Popconfirm>
                    </Tooltip>
                </Space>
            )
        }
    ];

    /**
     * 删除用户
     * @param userId 用户id
     */
    const doDeleteUser = (userId) => {
        RequestUtils.post(Apis.user.deleteUserById, {
            id: userId
        }).then(res => {
            doPageQuerySysUsers({
                ...pageQueryUserReq,
            });
            messageApi.success("删除用户成功");
        }).catch(err => {
            messageApi.error("删除用户失败, " + err.message);
        })
    }

    return (
        <div style={{
            backgroundColor: '#FFFFFF',
            borderRadius: '8px',
            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
            overflow: 'hidden',
            margin: '16px 0'
        }}>
            {contextHolder}

            <Table
                columns={columns}
                dataSource={pageQueryUserResp?.records || []}
                rowKey="id"
                pagination={{
                    total: pageQueryUserResp?.total || 0,
                    current: pageQueryUserReq.pageNum,
                    pageSize: pageQueryUserReq.pageSize,
                    showSizeChanger: true,
                    onChange: (pageNum, pageSize) => {
                        setPageQueryUserReq({...pageQueryUserReq, pageNum, pageSize});
                        doPageQuerySysUsers({...pageQueryUserReq, pageNum, pageSize});
                    },
                    showTotal: (total) => `共 ${total} 条数据`,
                    pageSizeOptions: ['10', '25', '50'],
                    style: {
                        padding: '16px',
                        backgroundColor: '#FFFFFF',
                        borderTop: '1px solid #E5E6EB'
                    }
                }}
                components={{
                    Header: {
                        cell: (props) => (
                            <th {...props} style={{
                                ...COMMON_STYLES.tableHeader,
                                ...props.style
                            }}/>
                        )
                    },
                    Body: {
                        cell: (props) => (
                            <td {...props} style={{
                                ...COMMON_STYLES.tableCell,
                                ...props.style
                            }}/>
                        )
                    }
                }}
                onRow={(record, index) => ({
                    style: {
                        backgroundColor: index % 2 === 0 ? COLORS.tableEvenRow : COLORS.tableOddRow,
                        transition: 'background-color 0.2s ease'
                    },
                    onMouseEnter: (e) => {
                        e.currentTarget.style.backgroundColor = COLORS.tableHover;
                    },
                    onMouseLeave: (e) => {
                        const isEven = index % 2 === 0;
                        e.currentTarget.style.backgroundColor = isEven ? COLORS.tableEvenRow : COLORS.tableOddRow;
                    }
                })}
            />
        </div>
    );
};

export default UserList;    